// Add a New Comment Form
.comments__edit-form {
	position: relative;
	padding: 0;
	margin-top: 5px;

	input {
		font-size: $font-body-small;
		padding: 5px 10px;
	}

	// The inner working of these styles is covered here: http://alistapart.com/article/expanding-text-areas-made-elegant
	.expanding-area {
		position: relative;
		$initial-focused-height: 70px;

		pre,
		textarea {
			max-height: 400px;
			min-height: 33px;
			margin: 0;
			padding: 5px 60px 5px 5px;
			font-size: $font-body-small;
			font-family: $serif;
			line-height: 21px;

			white-space: pre-wrap;
			word-wrap: break-word;
		}

		textarea {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			resize: none;
		}

		pre {
			border: 1px solid var( --color-neutral-light );
			box-sizing: border-box;
			display: block;
			visibility: hidden;
		}

		&.focused {
			min-height: $initial-focused-height;
		}
	}

	button {
		opacity: 0;
		position: absolute;
		top: 4px;
		right: 16px;
		padding: 4px;
		font-size: $font-body-extra-small;
		font-weight: 600;
		text-transform: uppercase;
	color: var( --color-text-subtle );
		transition: all 0.2s ease-in-out;

		&.is-active {
			color: var( --color-primary );
			cursor: pointer;
		}

		&.is-visible {
			opacity: 1;
		}
	}

	button:focus {
		outline: dotted 1px var( --color-primary );
		color: var( --color-primary );
	}

	.comments__cancel-reply {
		font-size: $font-body-extra-small;
		cursor: pointer;
	}
}
